import { APIGoodsList } from './fetch.js';


layui.use(['laypage'], function () {
    var laypage = layui.laypage;

    var key = '';
    // var key = queryString('key');
    var page = 1;
    var size = 12;
    var sort = 'gid';
    var type = 'asc';

    renderList(true);


    $('.b1').click(function () {
        sortList('price')
    })
    $('.b2').click(function () {
        sortList('price', true)
    })
    $('.b3').click(function () {
        sortList('gname')
    })
    var timer = null
    $(document).on('input', '#inp', function (e) {
        page = 1;
        //正常用户输入一个马上调接口
        console.log($(e.target).val());
        key = $(e.target).val();
        //防抖，用户高频操作时，对代码进行延时
        clearTimeout(timer);
        //延时器，用户输入后延时一段时间再调接口
        timer = setTimeout(() => {
            renderList(true);
        },500)

    })

    function sortList(_sort, _type = false) {
        sort = _sort;
        type = _type ? 'desc' : 'asc';
        page = 1;
        renderList(true);
    }






    function renderList(tag) {
        APIGoodsList({
            key,
            page,
            size,
            sort,
            type
        }).then(({ data, count }) => {
            console.log(data.length);
            var html = '';
            $.each(data, function (index, { gid, img, gname, desc, price }) {
                html +=
         `
                <a href="http://127.0.0.1:5500/2004/sweetheart/html/xiangqing.html?gid=${gid}"><li>
                    <img src="${img}" alt="">
                    <h3>${gname}</h3>
                    <span>${price}</span>
                    <p class="p1">新品></p><br>
                    <p class="p2">加入购物车</p>
                </li></a>
        `                         
            })

            $('.list ul').html(html);

            if (tag) {



                //执行一个laypage实例
                laypage.render({
                    elem: 'pagation', //注意，这里的 test1 是 ID，不用加 # 号
                    limit: size,
                    count //数据总数，从服务端得到
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        // console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                            page = obj.curr;
                            renderList();
                        }
                    }
                });
            }
        })
    }
})